<template>
	<view class="">
		<view class="" v-for="(item,index) in jobdetailinfo">
	
			<text style="margin-left: 42rpx; font-size: 28rpx; color: #999999; font-weight: bold;">{{(keys==1) ? item.name : (keys==2) ? item.area : item.detail_pos}}</text>
			<view class="container">
			    <!--  第一层进度条的背景色  -->
				<view class="strip"> 
					<!-- 第二层进度条的颜色 -->
					<view class="blue" :style="'width:'+item.rate+'%'"></view>
				</view>
				<view class="numLabel">
					{{parseFloat(item.rate).toFixed(0)}}%
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default{
		props: {
			keys:'',
			jobdetailinfo: {
				type: Array,
				default: []
			},
		},
		data(){
			return{
				info:{
					progress:66,	
				}
			}
		}
	 }
</script>

<style>
	.container{ 
		padding: 20rpx 42rpx; 
		display: flex;
		flex-direction: row;
	}
	
	.strip { 
		position: relative; 
		width: 100%; 
		height: 28rpx; 
		color: rgba(80, 80, 80, 1); 
		background-color: #F4F4F4; 
		font-size: 28rpx; 
		text-align: center; 
		margin-bottom: 12rpx; 
		border-radius: 14rpx; 
		
	}
	.blue{
		height: 28rpx;
		color: rgba(80, 80, 80, 1);
		/* background-color:#FF3B0A; */
		background-image: linear-gradient(#FF7E36, #FF3B0A);
		border-radius: 14rpx;
		font-size: 28rpx;
		text-align: center;
		box-shadow: -2rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.2);


	}
	
	.numLabel {
		margin-left: 20rpx; 
		height: 24rpx; 
		line-height: 24rpx; 
		color: #FF3B0A; 
		font-size: 28rpx; 
		font-weight: bold;
	}
</style>